<template>
  <div class="printBox">
    <div class="printFull" :class="{
      preview: isPreview,
    }">
      <el-scrollbar>
        <div :id="`print${id}`">
          <div class="printBox-item pageBreak" v-for="(item, index) in Array.isArray(data) ? data : [data]">
            <slot name="item" :row='item' :printRow="item" :index="index" v-if="!print || (print && print.state)" />
          </div>
        </div>
      </el-scrollbar>
    </div>
    <!-- 提交按钮，用于执行方法并准备打印 -->
    <div @click.stop="clickBtn" v-if="!print">
      <slot v-if="$slots.default" :disabled="printDisabled"></slot>
      <el-button v-else :disabled="printDisabled">打印</el-button>
    </div>
    <!-- 打印按钮，实际触发打印 -->
    <div v-print="dataInfo.printOption" ref="printButton" style="display:none;"></div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const props = withDefaults(
  defineProps<{
    data?: any,
    id?: number | string;
    isPreview?: boolean;//是否预览
    print?: any,//打印参数
  }>(),
  {
    id: 1,
    data: [],
  },
);
watch(() => props.print?.state, (newVal, oldVal) => {
  if (props.print.state) {
    clickBtn()
  }
});
const printButton = ref(null);
const printDisabled = ref(false);
const dataInfo: any = reactive({
  print: [],
  printOption: {
    id: `print${props.id}`, // 打印元素的id 不需要携带#号
    preview: false, // 开启打印预览
    previewTitle: '打印预览', // 打印预览标题
    popTitle: '员工信息', // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
    zIndex: 20002,
    previewBeforeOpenCallback: () => {
      // console.log("触发打印预览打开前回调");
    },
    previewOpenCallback: () => {
      // console.log("触发打开打印预览回调");
    },
    beforeOpenCallback: () => {
      // console.log(`print${props.id}`);
      // console.log("触发打印工具打开前回调");
    },
    openCallback: () => {
      // console.log("触发打开打印工具回调");
    },
    closeCallback: () => {
      // console.log("触发关闭打印工具回调");
      if (props.print) {
        props.print.state = false
      }
    },
    clickMounted: () => {
      // console.log("触发点击打印回调");
    }
  }
})

// 提交处理函数
const clickBtn = () => {
  let _getPrint: Function = props.data?.getPrint
  if (_getPrint && typeof _getPrint === 'function') {
    _getPrint(props.data, handleSubmit)
  } else {
    handleSubmit()
  }
};
// 提交处理函数
const handleSubmit = () => {
  printDisabled.value = true
  nextTick(() => {
    const ref: any = printButton.value
    console.log(ref);
    console.log(dataInfo.printOption.id);
    if (ref) {
      ref.click();
    }
    printDisabled.value = false
  })
};
</script>
<style scoped lang="scss">
.printFull {
  width: 0;
  height: 0;
  overflow: hidden;

  &.preview {
    position: fixed;
    top: 0;
    right: 0;
    background: $white;
    z-index: 9999;
    width: 210mm;
    height: 100%;
    box-shadow: 0 4px 8px #00000008;

    .pageBreak {
      position: relative;
    }
  }

  .printBox-item {
    padding: 20px;
    height: 297mm;

    &:not(:last-child) {
      padding-bottom: 0;
    }
  }
}

@media print {

  .no-print {
    display: none !important;
  }

  .pageBreak {
    page-break-after: always
  }

  .printBox-item {
    padding: 20px;

    &:not(:last-child) {
      padding-bottom: 0;
    }
  }

  .procedure {
    word-wrap: break-word;
  }

  @page {
    size: auto;
    margin: 0;
  }

  body,
  html {
    height: auto !important;
  }
}
</style>
